<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var arr = new Array();
        var a = 0;
        function f(val) {
            for (var i=0;i<arr.length;i++){
                if (arr[i]==val){
                    arr.splice(i,1);
                    f1();
                    if (a!=0){
                        a = 0;
                        return;
                    }
                }
            }
            arr.push(val);
            f1();
        }
        function f1() {
            var zfc ="";
            for (var b=0;b<arr.length;b++){
                if (b!=arr.length-1){
                    zfc+=arr[b]+",";
                } else {
                    zfc+=arr[b];
                }
            }
            document.getElementById("wbk").value=zfc;
            a = 1;
        }
    </script>
</head>
<body>
    <input id="wbk" type="text"><br>
    <input id="a" type="checkbox" onclick="f(this.id)">a<input id="b" type="checkbox" onclick="f(this.id)">b
    <input id="c" type="checkbox" onclick="f(this.id)">c<input id="d" type="checkbox" onclick="f(this.id)">d
    <input id="e" type="checkbox" onclick="f(this.id)">e<input id="f" type="checkbox" onclick="f(this.id)">f
</body>
</html>